"use client"

import React from 'react'
import { cn } from '@/lib/utils'
import { AttachmentLinks } from './AttachmentLinks'
import { ActionButtons } from './ActionButtons'
import { UsageDialog } from './dialogs/UsageDialog'
import { PaymentDialog } from './dialogs/PaymentDialog'
import { FriendLinksDialog } from './dialogs/FriendLinksDialog'
import { AboutDialog } from './dialogs/AboutDialog'
import { useBottomNavigation, usePerformanceMonitoring } from './hooks/useBottomNavigation'
import { BOTTOM_NAV_STYLES, TRACKING_EVENTS } from '@/lib/constants/bottom-navigation'

interface BottomNavigationProps {
  className?: string
}

/**
 * 底部导航组件
 * 整合外部链接和操作按钮，提供完整的底部导航功能
 */
export function BottomNavigation({ className }: BottomNavigationProps) {
  // 使用性能监控Hook
  usePerformanceMonitoring('BottomNavigation')
  
  // 使用底部导航状态管理Hook
  const {
    activeDialog,
    openDialog,
    closeDialog,
    trackInteraction
  } = useBottomNavigation()

  // 处理外部链接点击
  const handleAttachmentLinkClick = (linkId: string, href: string) => {
    trackInteraction(TRACKING_EVENTS.ATTACHMENT_LINK_CLICK, {
      linkId,
      href
    })
  }

  // 处理操作按钮的链接点击
  const handleActionLinkClick = (buttonId: string, href: string) => {
    trackInteraction(TRACKING_EVENTS.EXTERNAL_LINK_CLICK, {
      buttonId,
      href
    })
  }

  // 处理弹窗打开
  const handleDialogOpen = (dialogType: Exclude<typeof activeDialog, null>) => {
    openDialog(dialogType)
  }

  // 处理弹窗关闭
  const handleDialogClose = () => {
    closeDialog()
  }

  return (
    <>
      {/* 主容器 */}
      <nav
        className={cn(
          BOTTOM_NAV_STYLES.layout.container,
          BOTTOM_NAV_STYLES.spacing.sectionGap,
          'py-8 mt-8 border-t border-border/50',
          'bottom-nav-bg',
          className
        )}
        role="navigation"
        aria-label="底部导航"
      >
        {/* 外部链接区域 */}
        <AttachmentLinks 
          onLinkClick={handleAttachmentLinkClick}
          className="w-full max-w-4xl"
        />
        
        {/* 操作按钮区域 */}
        <ActionButtons
          onDialogOpen={handleDialogOpen}
          onLinkClick={handleActionLinkClick}
          className="w-full max-w-4xl"
        />

        {/* 装饰元素 */}
        <div className="flex items-center gap-2 text-xs text-muted-foreground/60 mt-4">
          <div className="flex-1 h-px bg-border/30"></div>
          <span className="px-3">
                <a
                  href="https://www.Hello123.com"
                >
                  Copyright © 2025 Hello123.com | 
                </a>
                <a href="https://beian.miit.gov.cn/" target="_blank"> 浙ICP备18001032号 </a>
          </span>
          <div className="flex-1 h-px bg-border/30"></div>
        </div>
      </nav>

      {/* 弹窗组件 */}
      <UsageDialog
        open={activeDialog === 'usage'}
        onOpenChange={(open) => {
          if (!open) handleDialogClose()
        }}
      />
      
      <PaymentDialog
        open={activeDialog === 'payment'}
        onOpenChange={(open) => {
          if (!open) handleDialogClose()
        }}
      />
      
      <FriendLinksDialog
        open={activeDialog === 'friendLinks'}
        onOpenChange={(open) => {
          if (!open) handleDialogClose()
        }}
      />
      
      <AboutDialog
        open={activeDialog === 'about'}
        onOpenChange={(open) => {
          if (!open) handleDialogClose()
        }}
      />
    </>
  )
}

/**
 * 响应式底部导航组件
 * 针对不同屏幕尺寸优化布局
 */
interface ResponsiveBottomNavigationProps extends BottomNavigationProps {
  variant?: 'compact' | 'standard' | 'expanded'
}

export function ResponsiveBottomNavigation({ 
  variant = 'standard', 
  ...props 
}: ResponsiveBottomNavigationProps) {
  const variantStyles = {
    compact: 'py-4 gap-4',
    standard: 'py-8 gap-8', 
    expanded: 'py-12 gap-12'
  }

  return (
    <BottomNavigation
      {...props}
      className={cn(
        variantStyles[variant],
        props.className
      )}
    />
  )
}

/**
 * 简化版底部导航组件
 * 只包含基础功能，适用于空间受限的场景
 */
export function CompactBottomNavigation({ className }: BottomNavigationProps) {
  const {
    activeDialog,
    openDialog,
    closeDialog,
    trackInteraction
  } = useBottomNavigation()

  const essentialButtons = [
    { id: 'usage', title: '使用方法', dialogType: 'usage' as const },
    { id: 'about', title: '关于', dialogType: 'about' as const }
  ]

  return (
    <>
      <div
        className={cn(
          'flex justify-center items-center gap-4 py-4',
          'border-t border-border/50',
          className
        )}
      >
        {essentialButtons.map((button) => (
          <button
            key={button.id}
            type="button"
            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            onClick={() => {
              openDialog(button.dialogType)
              trackInteraction(TRACKING_EVENTS.ACTION_BUTTON_CLICK, {
                buttonId: button.id
              })
            }}
          >
            {button.title}
          </button>
        ))}
      </div>

      {/* 简化弹窗 */}
      <UsageDialog
        open={activeDialog === 'usage'}
        onOpenChange={(open) => !open && closeDialog()}
      />
      
      <AboutDialog
        open={activeDialog === 'about'}
        onOpenChange={(open) => !open && closeDialog()}
      />
    </>
  )
}

// 导出所有组件
export {
  AttachmentLinks,
  ActionButtons,
  UsageDialog,
  PaymentDialog,
  FriendLinksDialog,
  AboutDialog,
  useBottomNavigation
} 